<template>
  <div class="tabs">
    <!--closable这里说明home是不能关闭的-->
    <el-tabs v-model="editableTabsValue" @tab-click="handleClick" type="card" @tab-remove="removeTab">
      <el-tab-pane v-for="item in tags" :key="item.name" :label="item.label" :name="item.name" :closable="item.name !== '/children'"></el-tab-pane>
    </el-tabs>
    <!-- <el-tag
      :key="tag.name"
      size="small"
      v-for="(tag, index) in tags"
      :closable="tag.name !== 'children'"
      :disable-transitions="false"
      @close="handleClose(tag, index)"
      @click="changeMenu(tag)"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
      class="tagsSet"
      v-show="index < 8"
    >
      {{ tag.label }}
    </el-tag>
    <span v-if="tags.length > 8" @click="tangchu"
      ><el-dropdown>
        <span class="el-dropdown-link">
          More
        <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item disabled>Action 4</el-dropdown-item>
            <el-dropdown-item divided>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown></span
    > -->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      editableTabsValue: ''
    }
  },
  computed: {
    //获取vuex的标签集合数据
    ...mapState({
      tags: (state) => state.tabsList,
      currentMenu: (state) => state.currentMenu
    })
  },
  created() {
    this.editableTabsValue = this.$route.path
  },
  // 路由监听器
  watch: {
    $route: 'fetchData'
  },
  methods: {
    fetchData() {
      console.log(this.currentMenu)
      if (this.currentMenu === null) this.editableTabsValue = '/children'
      if (this.currentMenu !== null) {
        if (this.$route.path === '/PublicDisk' || this.$route.path === '/Empty' || this.$route.path === '/AnotherDisk') this.editableTabsValue = '/SharedHardDisk'
        else if (this.$route.path === '/Addreport' || this.$route.path === '/Showreport') this.editableTabsValue = '/Jobtimereport'
        else if (this.$route.path === '/MenuSetChild') this.editableTabsValue = '/MenuSet'
        else this.editableTabsValue = this.$route.path
      }
      console.log(this.editableTabsValue)
    },
    ...mapMutations({
      close: 'closeTab'
    }),
    handleClick(tab) {
      console.log(tab)
      this.$router.push(tab.props.name)
      this.$store.commit('selectMenu', tab.props)
    },
    removeTab(targetName) {
      console.log(this.tags)
      console.log(targetName)
      let length = this.tags.length - 1
      for (let i = 0; i < this.tags.length; i++) {
        if (this.tags[i].name === targetName) {
          const tag = this.tags[i]
          let index = i
          this.close(tag)
          this.editableTabsValue = this.tags[length - 1].name
          console.log(this.editableTabsValue)
          this.$router.push(this.tags[length - 1].name)
          // this.editableTabsValue = this.tags[length - 1].name
          //   // 如果关闭的标签不是当前路由的话，就不跳转
          if (targetName !== this.$route.path) {
            return
          }
          //   // 关闭的标签是最右边的话，往左边跳转一个
          if (index === length) {
            this.$router.push(this.tags[index - 1].name)
            this.editableTabsValue = this.tags[index - 1].name
            return
          } else {
            //     // 否则往右边跳转
            this.$router.push(this.tags[index].name)
            this.editableTabsValue = this.tags[index].name
            return
          }
          return
        }
      }
    }
  }
}
</script>

<style scoped>
/* .el-tag {
  height: 30px;
  line-height: 28px;
  margin-top: 5px;
}
.tagsSet {
  margin-top: 0px;
  margin-right: 10px;
  cursor: pointer;
} */
</style>
